<!--
 * @描述: 
 * @作者: 约訂
 * @Date: 2024-11-08 14:26:59
 * @LastEditTime: 2024-11-20 14:15:41
 * @修改人员: 约訂
-->
<template>
  <div class="right_box_main">
    <div class="top">设置</div>
    <div class="bot_box">
      <div class="type_qun">
        <div class="type_name">设置群类型</div>
        <el-radio-group v-model="groupSetItem.GroupType">
          <el-radio :value="1">工厂</el-radio>
          <el-radio :value="2">师傅</el-radio>
        </el-radio-group>
      </div>
      <div class="type_box" v-if="groupSetItem.GroupType == 1">
        <!--           @select="handleSelect" -->
        <el-select
          v-model="groupSetItem.FactoryId"
          placeholder="请输入厂商名称"
          filterable
          class="number_input search_input"
          remote
          :remote-method="QuerySearchAsync"
          :loading="remoteMethodLoading"
          clearable
        >
          <el-option
            v-for="item in FactoryList"
            :key="'Factory' + item?.FactoryId"
            :label="item.FactoryName"
            :value="item.FactoryId"
          />
        </el-select>
        <!-- <el-autocomplete
          v-model="state"
          :fetch-suggestions="QuerySearchAsync"
          placeholder="请输入工厂名称"
          value-key="FactoryName"
        /> -->
        <el-button
          size="small"
          v-if="groupSetItem.FactoryId != ''"
          @click="SetGroup"
          >绑定工厂</el-button
        >
      </div>
      <div class="type_box" v-else-if="groupSetItem.GroupType == 2">
        <!--           @select="handleSelect" -->
        <el-select
          v-model="groupSetItem.MasterId"
          placeholder="请输入师傅名称"
          filterable
          class="number_input search_input"
          remote
          :remote-method="QuerySearchAsync"
          :loading="remoteMethodLoading"
          clearable
        >
          <el-option
            v-for="item in MasterList"
            :key="'Master' + item?.MasterId"
            :label="item.MasterTrueName"
            :value="item.MasterId"
          />
        </el-select>
        <el-button
          size="small"
          v-if="groupSetItem.MasterId != ''"
          @click="SetGroup"
          >绑定师傅</el-button
        >
      </div>
      <div class="type_box" v-if="groupSetItem.GroupType != 0">
        <!--           @select="handleSelect" -->
        <span class="size_12">绑定信息：</span
        ><span
          v-if="
            groupSetItem.FactoryName != null || groupSetItem.MasterName != null
          "
          >{{
            groupSetItem.GroupType == 1
              ? groupSetItem.FactoryName
              : groupSetItem.MasterName
          }}</span
        >
        <span v-else> - - - - </span>
      </div>
      <div class="customer_transceiver">
        <el-checkbox
          v-model="groupSetItem.IsPushMain"
          label="开启所属客服接收信息"
          size="large"
          :true-label="1"
          @change="SetGroup"
          :false-label="0"
        />
      </div>
      <div class="customer_transceiver">
        <el-checkbox
          v-model="groupSetItem.IsPushSpec"
          label="开启对接客服接收信息"
          :true-label="1"
          :false-label="0"
          size="large"
          @change="SetGroup"
        />
        <!-- <el-button size="small">添加客服</el-button> -->
      </div>
      <div class="customer_list_transceiver">
        <el-checkbox
          @change="SetGroup"
          v-for="(item, index) in groupSetItem.DockingList"
          :key="'UserId_' + index"
          v-model="item.IsCheck"
          :true-label="1"
          :false-label="0"
          :label="item.TrueName"
          size="large"
        />
        <!-- <el-button size="small">添加客服</el-button> -->
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { log } from "console";
import {
  ref,
  onMounted,
  onUnmounted,
  defineEmits,
  getCurrentInstance,
} from "vue";
const { proxy } = getCurrentInstance() as any;
// const props = defineProps({
//   /**基础信息 */
//   groupItem: {
//     type: Object, // 数据类型
//     default: {}, // 未传值时的默认值
//   },
// });
/**选择是师傅还是工厂 */
const radio = ref<number>(1);
/**选择的工厂或者师傅 */
const state = ref<any>("");
const stateMaster = ref<any>("");
/**开启客服接收消息 */
const openCustomer = ref<boolean>(false);
/**远程搜索等待loading */
const remoteMethodLoading = ref<boolean>(false);
const FactoryList = ref<any[]>([]);
const MasterList = ref<any[]>([]);
/**查询并返回 */
const QuerySearchAsync = async (str: string) => {
  // console.log(str);
  if (str == "") {
    return;
  }
  if (groupSetItem.value.GroupType == 1) {
    let { rows, Success } = await proxy.$Post(
      "/DealWeChatRecord/WeChatGetFactory",
      {
        Page: 1,
        Rows: 1000,
        Content: str,
      }
    );
    if (!Success) return;
    FactoryList.value = rows.FactoryList;
  } else {
    let { rows, Success } = await proxy.$Post(
      "/DealWeChatRecord/WeChatGetMaster",
      {
        Page: 1,
        Rows: 1000,
        Content: str,
      }
    );
    if (!Success) return;
    MasterList.value = rows.MasterList;
  }
};
const groupItem = ref({});
const customerList = ref<any[]>([]);
/**群设置信息 */
const groupSetItem = ref<any>({});
/**查询群信息 */
const GetGroup = async (item: any) => {
  groupItem.value = item;
  // let { rows, Success } = await proxy.$Post(
  //   "/DealWeChatRecord/WeChatGetCustomer",
  //   {
  //     Page: 1,
  //     Rows: 10000,
  //     GroupInfoId: item.GroupInfoId,
  //   }
  // );
  // if (!Success) return;
  // console.log(rows.CustomerList);
  // customerList.value = rows.CustomerList;
  let data = await proxy.$Post("/DealWeChatRecord/GetGroupSetting", {
    GroupInfoId: item.GroupInfoId,
  });
  if (!data.Success) return;
  console.log(data);

  groupSetItem.value = data.rows;
  console.log(groupSetItem.value);

  if (groupSetItem.value.GroupType == 0) {
    groupSetItem.value.GroupTyp = 1;
  }
  if (groupSetItem.value.FactoryId == 0) {
    groupSetItem.value.FactoryId = "";
  } else {
    QuerySearchAsync(groupSetItem.value.FactoryName);
  }
  if (groupSetItem.value.MasterId == 0) {
    groupSetItem.value.MasterId = "";
  } else {
    QuerySearchAsync(groupSetItem.value.MasterName);
  }

  // groupSetItem.value.MasterId = "";
};
/**设置群信息 */
const SetGroup = async () => {
  if (groupSetItem.value.GroupType == 1 && groupSetItem.value.FactoryId == "") {
    proxy.$ShowMsg({
      message: "请选择工厂",
      type: "error",
    });
    return;
  }
  if (groupSetItem.value.GroupType == 2 && groupSetItem.value.MasterId == "") {
    proxy.$ShowMsg({
      message: "请选择师傅",
      type: "error",
    });
    return;
  }
  console.log({ ...groupSetItem.value, GroupInfoId: groupSetItem.value.Id });

  let { rows, Success } = await proxy.$Post(
    "/DealWeChatRecord/BatchBindDocking",
    { ...groupSetItem.value, GroupInfoId: groupSetItem.value.Id }
  );
  if (!Success) return;
  // console.log(groupSetItem.value);

  GetGroup({ ...groupSetItem.value, GroupInfoId: groupSetItem.value.Id });
  proxy.$ShowMsg({
    message: "保存成功",
    type: "success",
  });
};
defineExpose({
  GetGroup,
});
/** */
// QuerySearchAsync();
</script>
<style lang="scss">
.right_box_main {
  div {
    box-sizing: border-box;
  }
  width: 300px;
  height: 440px;
  overflow: hidden;

  display: flex;
  flex-direction: column;

  .top {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: var(--el-text-color-placeholder);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    text-align: start;
    padding-left: 20px;
    font-weight: bold;
  }
  .bot_box {
    width: 100%;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    .type_qun {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 40px;

      .type_name {
        margin-right: 30px;
      }
    }
    .customer_transceiver {
      text-align: start;
    }
    // padding: 10px;
  }
}
</style>